<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript">
        $(function (){
            //课程的列表 ajax
            $.ajax({
                async:false,
                url:"courseList.do",
                type:"post",
                dataType:"json",
                success:function (obj){
                    for (var x in obj) {
                        $("#courses").append(" <input type='checkbox' name='cids' value="+obj[x].cid+">"+obj[x].cname)
                    }
                }
            })

            $("[value='+']").live('click',function (){
                $("#hobbys").append('<div name="hob">' +
                    '<input type="text" name="hobbyss">'+
                    '<input type="button" value="+">' +
                    '<input type="button" value="-">' +
                    '</div>')
            })
            $("[value='-']").live('click',function (){
                if($("[name='hob']").length>1){
                    $(this).parent().remove()
                }else{
                    alert("至少留1个")
                }
            })

            // ajax 的回显
            $.ajax({
                async:false,
                url:"getInfoByid.do",
                data:{"sid":$("[name='sid']").val()},
                type:"post",
                dataType:"json",
                success:function (obj){
                   $("[name='sname']").val(obj.sname);
                   $("[name='sex'][value='"+obj.sex+"']").prop("checked",true);
                   // 爱好的回显
                   var hobbyss=obj.hobby.split(",")
                    for (var x in hobbyss) {
                        $("#hobbys").prepend('<div name="hob">' +
                            '<input type="text" name="hobbyss" value='+hobbyss[x]+'>'+
                            '<input type="button" value="+">' +
                            '<input type="button" value="-">' +
                            '</div>')
                    }
                    $("[name='birthday']").val(obj.birthday);
                    $("img").prop("src",obj.pic);
                    var cidss=obj.cids.split(",")
                    for(var i in cidss){
                        $("[name='cids'][value="+cidss[i]+"]").prop("checked",true);
                    }
                    $("[name='sheng_id']").val(obj.sheng);
                    $("[name='shi_id']").val(obj.shi);
                    $("[name='xian_id']").val(obj.xian);
                }
            })

            // 省回显
            $.ajax({
                url:"cityList.do",
                type:"post",
                data:{"pid":0},
                dataType:"json",
                success:function (obj){
                    for (var x in obj) {
                        if(obj[x].id==$("[name='sheng_id']").val()){
                            $("[name='sheng.id']").append(" <option value="+obj[x].id+" selected>"+obj[x].name+"</option>")
                            $("[name='sheng.id']").trigger("change");
                        }else{
                            $("[name='sheng.id']").append(" <option value="+obj[x].id+">"+obj[x].name+"</option>")
                        }

                    }
                }
            })
            $("[name='sheng.id']").change(function () {
                var pid=$(this).val();
                $("[name='shi.id']").empty();
                $("[name='shi.id']").append("<option value=''>请选择</option>")
                $("[name='xian.id']").empty();
                $("[name='xian.id']").append("<option value=''>请选择</option>")
                $.ajax({
                    url:"cityList.do",
                    type:"post",
                    data:{"pid":pid},
                    dataType:"json",
                    success:function (obj){
                        for (var x in obj) {
                            if(obj[x].id==$("[name='shi_id']").val()){
                                $("[name='shi.id']").append(" <option value="+obj[x].id+" selected>"+obj[x].name+"</option>")
                                $("[name='shi.id']").trigger("change");
                            }else{
                                $("[name='shi.id']").append(" <option value="+obj[x].id+">"+obj[x].name+"</option>")
                            }
                        }
                    }
                })
            })
            $("[name='shi.id']").change(function () {
                var pid=$(this).val();

                $("[name='xian.id']").empty();
                $("[name='xian.id']").append("<option value=''>请选择</option>")
                $.ajax({
                    url:"cityList.do",
                    type:"post",
                    data:{"pid":pid},
                    dataType:"json",
                    success:function (obj){
                        for (var x in obj) {
                            if(obj[x].id==$("[name='xian_id']").val()){
                                $("[name='xian.id']").append(" <option value="+obj[x].id+" selected>"+obj[x].name+"</option>")
                            }else{
                                $("[name='xian.id']").append(" <option value="+obj[x].id+">"+obj[x].name+"</option>")
                            }

                        }
                    }
                })
            })


        })
    </script>
</head>
<body>

    <form action="upd.do" method="post" enctype="multipart/form-data">
        <input type="hidden" name="sid" value="${param.sid}">

        <input type="hidden" name="sheng_id" >
        <input type="hidden" name="shi_id" >
        <input type="hidden" name="xian_id" >
       姓名： <input type="text" name="sname"><br>
        性别:<input type="radio" name="sex" value="男">男
            <input type="radio" name="sex" value="女">女<br>
        爱好:<div id="hobbys">


                <div name="hob">
                <input type="text" name="hobbyss">
                <input type="button" value="+">
                <input type="button" value="-">
                </div>
            </div>
        生日:<input type="text" name="birthday" onclick="WdatePicker()" readonly> <br>

        头像:<IMG src="" alt="无法展示图片" width="50px">
        <input type="file" name="file"><br>
        科目:<div id="courses">

            </div>
        地址:<select name="sheng.id">
                <option value="">请选择</option>
             </select>
        <select name="shi.id">
            <option value="">请选择</option>
        </select>
        <select name="xian.id">
            <option value="">请选择</option>
        </select><br>
        <input type="submit">
    </form>
</body>
</html>